<include file="Public:iframe_head" />

	<main class="main-center">

		<div class="channel-head">  

			<div class="channel-info">
				 <h3>{$data.name}</h3>
				 <div>
					<img class="channel-img" alt="aaa" src="{$data.pic}">
					<div class="cnl-instr">
						
						<p class="cnl-instr-head">频道简介</p>
						<p class="cnl-instr-content">{$data.info}</p>
						<span class="left-music">{$data.sound_count}</span>
						<span class="left-people">{$data.follow_count}</span>
						<span class="left-share">{$data.share_count}</span>
					</div>
				</div>
			</div>
		 </div>

		<div class="music-info">	
			<ul>	
				<li  class="music_list" v-for="(item,index) in music_list">
					<div v-on:click = "music_play(item.source,item.name,item.pic,index)"  class="info-view">
						<div class="music-playback"><i class="play-icon"></i></div>
						<div class="music-img">
							<img  v-bind:src="item.pic">
							<span >{{music_length(item.length)}}</span>
						</div>
						<p class="music-name">{{item.name}}</p>
						<div class="music-status">
							<ul>
								<li>
									<i class="like"></i>
									<span>{{numberChangeAction(item.like_count)}}</span>
								</li>
								<li>
									<i class="share"></i>
									<span>{{numberChangeAction(item.share_count)}}</span>
								</li>
								<li>
									<i class="content"></i>
									<span>{{numberChangeAction(item.comment_count)}}</span>
								</li>

							</ul>
						</div>
						</div>
					</div>
				</li>
			</ul>
	
		
		</div>

		<div  style="text-align: center;">
			<ul class="pagination page-controll">
    		<li  v-for=" item in page_list">
         		<a href="javascript:void(0)" v-on:click="pageAction" v-bind:class="item.isSelect">{{item.page}}</a>
    		</li>
		</ul>
		</div>
		
	</main>
<div style="height: 120px;"></div>

</main>

<div class="foot-play-view">
	<div class="foot-music-tro">
		<div class="play-progress-tro">
			<div style="width: 100%;height: 100%;position: relative;">
				<img class="play-music-image" alt="music" src="__PUBLIC__/img/f0fc26f17b1b61a73540d0297f7cca71.png">
				<div class="progress-view">
					<p class="play-music-name">echo</p>
					<div class="progress-time">
						<span class="progress-currecttime">0:00</span>
						<span class="progress-endtime">0:00</span>
						<div class="progress-block-view"> 
							<div class="progress-block">
								<div class="progress-playing"></div>
							</div>
						</div>
						
					</div>
				</div>

			</div>
	</div>
	
	<div class="left-music-tro">
		<i id="foot-player-last"  class="fa fa-step-backward fa-1x"></i>
		<i id="foot-player-play" class="fa fa-play fa-1x"></i>
		<i id="foot-player-next" class="fa fa-step-forward fa-1x"></i>
	</div>

	<div class="right-music-tro">
		
		<div class="audio-volume-view">
			<i class="fa fa-volume-up"></i>
			<div class="audio-volume-ctro">
				<div class="audio-volume-slider"></div>
			</div>



		</div>



	</div>


</div>

	</div>





	
</div>


<script src="__PUBLIC__/js/audioUtil.js" type="text/javascript"></script>
<script type="text/javascript">
	var channelID = {$data.source_id};
	var Mpage_list = basePagListAction();


	var audio = new Audio();
	audio.controls = false;
	$(".foot-play-view").append(audio);

 	$(function() {
 		$(".progress-block").slider({
 			value:0,
	 		slide: function( event, ui ) {
	 			var allTime = audio.duration;
	 			if (!isNaN(allTime)) {
	 				$('.progress-playing').css("width",ui.value+"%");
	 				audio.currentTime = allTime*ui.value*0.01;
	 			}
     		 },
     		 stop:function( event, ui ) {
	 			var allTime = audio.duration;
	 			if (isNaN(allTime)) {
	 				$(this).slider("value",0);
	 			}
     		 },
		});

 		audio.ontimeupdate = function() {
 			var currentTime = audio.currentTime;
 			var allTime = audio.duration;
 			var per = currentTime/allTime;
 			if (allTime > 0) {
 				$(".progress-currecttime").text(formatSeconds(parseInt(currentTime)));
 				$(".progress-endtime").text(formatSeconds(parseInt(allTime)));
 			}
 			$(".progress-block .ui-slider-handle").css("left",per*100 +"%");
 			$('.progress-playing').css("width",per*100+"%");
 		};

 		audio.onended = function() {
 			nextAction();
		};

 		$("#foot-player-play").click(function() {
 			if (audio.paused && audio.src) {
				audio.play();
				$(this).removeClass("fa-play");
				$(this).addClass("fa-pause");
 			}else {
 				$(this).removeClass("fa-pause");
				$(this).addClass("fa-play");
 				audio.pause();
 			}	
 		})
		$("#foot-player-next").click(function() {
			nextAction();
		});
		$("#foot-player-last").click(function() {
			lastAction();
		});


		function lastAction() {
			var index = vue.current_play;
			var music_info;
			if(index == 0) {
				index = vue.music_list.length-1;
				music_info = vue.music_list[index];	
			}else {
				index = index-1;
				music_info = vue.music_list[index];	
			}
			vue.music_play(music_info.source,music_info.name,music_info.pic,index);

		}

		function nextAction() {
			var index = vue.current_play;
			var music_info;
			if(index == vue.music_list.length-1) {
				index = 0;
				music_info = vue.music_list[0];	
			}else {
				index = index+1;
				music_info = vue.music_list[index];	
			}
			vue.music_play(music_info.source,music_info.name,music_info.pic,index);
		}


		// volume  controll 

		$(".audio-volume-slider").slider({
			value:100,
			slide:function(event, ui) {
				audio.volume = ui.value *0.01
			}
		});


 	});


var vue = new Vue({
		el: '#app',
		data:{
			music_list:[],
			currect_page:1,
			page_list:Mpage_list,
			current_play:0,
			current_obj:""
		},
		created:function() {
  			this.fetchData();
  		},
  		methods:{
  			fetchData:function() {
  				var t = this;
  				$.get("{:U('Api/getMusicInfo')}",{"channel_id":channelID,"page":t.currect_page},function(data) {
  						var datainfo = data;
  						console.log(data);
  						if ( datainfo["rt"] == 1) {
  							t.music_list = datainfo["data"];
  						}

  						})
  			},
  			getSoundInfo:function(){
  				var t = this;
  				var id = t.current_obj.id;
  				if (t.current_obj.lyrics) {return;}
  				$.get(staticApi+"Api/getSoundInfo",{"id":id},function(data) {
				$("#lyrics-modal .refresh").css("display","none");
				var info = data["data"]["info"];
					t.current_obj.lyrics = info;
				});

  			},
  			pageAction:function(e) {
  				var info = e.target.innerHTML;
       			var t_currect_page = this.currect_page;
        		var t_page_list = this.page_list;
        		var t_length = this.music_list.length;
        		var pageRs = pageChangeAction(info,t_currect_page,t_page_list,t_length,15);
        		if (pageRs == undefined) {return};
        		this.page_list = pageRs.page_list;
        		this.currect_page = pageRs.currect_page;
  				this.fetchData();
  			},
  			music_play:function(src,name,pic,index) {
  				audio.src = src;
  				audio.play();
  				$("#foot-player-play").addClass("fa-pause");
  				$(".play-music-name").text(name);
  				$(".play-music-image").attr('src',pic);
  				this.current_play = index;
  				this.current_obj = this.music_list[this.current_play];
  				
  				this.getSoundInfo();
  			},
  			music_length:function(a) {
  				return formatSeconds(a);
  			},
  			numberChangeAction:function(a) {
  				return numberChangeInfo(a);
  			},
  		}
});
	
  
	 
</script>


<script src="__PUBLIC__/js/main.js" type="text/javascript"></script>
</body>
</html>